<template>
  <div class="box">
    <div class="header">
      <div class="title">我的</div>
      <div class="user">
        <div class="top">
          <dl>
            <dt><img :src="userInfo.avatarUrl" alt="" /></dt>
            <dd>
              <p>{{ userInfo.nickName }}</p>
              <span>15217287384</span>
            </dd>
          </dl>
          <navigator url="./news1">
            <van-icon name="envelop-o" info="5" color="#0272f0" />
          </navigator>
        </div>
        <van-divider hairline fontSize="18" borderColor="#eee" />
        <div class="bottom">
          <dl @click="goRelease()">
            <dt>
              <span class="iconfont icon-xinxi" style="color: #00fa9a"></span>
            </dt>
            <dd>我的发布</dd>
          </dl>
          <dl @click="goCollect()">
            <dt>
              <span
                class="iconfont icon-shoucang-"
                style="color: #f08080"
              ></span>
            </dt>
            <dd>收藏</dd>
          </dl>
          <dl @click="goCollect()">
            <dt>
              <span class="iconfont icon-liulanjilu-tianchong"></span>
            </dt>
            <dd>浏览历史</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="main">
      <div></div>
      <div class="cell">
        <van-cell
          is-link
          title="支付明细"
          link-type="navigateTo"
          url="/pages/my/payment"
          class="item"
        />
        <van-cell
          is-link
          title="问题反馈"
          link-type="navigateTo"
          url="/pages/my/question"
          class="item"
        />
        <van-cell
          is-link
          title="联系客服"
          link-type="navigateTo"
          url="/pages/my/contact"
          class="item"
        />
      </div>
    </div>
    <div class="footer">
      <van-button
        color="linear-gradient(to bottom right, #f00, #fff)"
        round
        class="button"
        block
        @click="exit"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import "../../static/icon/iconfont.css";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad: function (options) {
    this.userInfo = getApp().globalData.userInfo

      console.log( this.userInfo,111)
    wx.getStorage({
      key: "user",
      success(res) {
        console.log("user", res.data);
      },
    });
    
  },
  methods: {
    //退出登录
    exit() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    goRelease() {
      uni.navigateTo({
        url: "/pages/my/release",
      });
    },
    goCollect() {
      uni.navigateTo({
        url: "/pages/my/collect",
      });
    },
  },
};
</script>

<style lang='scss'>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 400rpx;
    background: linear-gradient(90deg, #0272f0, #36a2fe);
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    position: sticky;
    z-index: 999;
    .title {
      width: 100%;
      text-align: center;
      line-height: 200rpx;
      color: #fff;
    }
    .user {
      width: 90%;
      background: #fff;
      border-radius: 20rpx;
      z-index: 9999;
      border-bottom: 5rpx solid #eee;
      .top {
        width: 100%;
        height: 130rpx;
        display: flex;
        align-items: center;
        dl {
          width: 70%;
          display: flex;
          justify-content: start;
          margin-left: 20rpx;
          dt {
            width: 120rpx;
            height: 120rpx;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          dd {
            margin-left: 20rpx;
            p {
              font-weight: 800;
              font-size: 44rpx;
            }
            span {
              font-size: 35rpx;
            }
          }
        }
        van-icon {
          font-size: 54rpx;
          margin-left: 20rpx;
        }
      }
      .bottom {
        margin-top: 10rpx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        dl {
          width: 30%;
          display: flex;
          flex-direction: column;
          align-items: center;
          dt {
            span {
              font-size: 54rpx;
            }
          }
        }
      }
    }
  }
  .main {
    width: 100%;
    flex: 1;

    .cell {
      margin-top: 130rpx;
      background: #eee;
      width: 100%;
      height: 340rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      van-cell.item {
        display: inline-block;
        width: 100%;
      }
      .item:nth-child(2),
      .item:nth-child(3) {
        margin-top: 10rpx;
      }
    }
  }
  .footer {
    margin-top: 325rpx;
    width: 100%;
    height: 100rpx;
    .button {
      width: 85%;
      height: 100%;
      font-size: 35rpx;
      font-weight: 800;
      color: #fff;
    }
  }
}
</style>